import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';

/// 商品
class CollectProductController extends GetxController {}

class CollectProductView extends GetView<CollectProductController> {
  const CollectProductView({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (_, int index) {
        return Container(
          alignment: Alignment.center,
          margin: const EdgeInsets.only(top: 15),
          child: Container(
            constraints: const BoxConstraints.expand(width: 345),
            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5)),
            padding: const EdgeInsets.only(left: 10, right: 20, top: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(5),
                  child: CachedNetworkImage(
                    imageUrl:
                        'https://img.alicdn.com/bao/uploaded/i2/757334282/O1CN01qPWOOa1hVCmMfMetc_!!757334282.jpg',
                    width: 90,
                    height: 90,
                    fit: BoxFit.fill,
                  ),
                ),
                Expanded(
                    child: Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '夏季新款网红女鞋韩版百搭后空一字带',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(bottom: 5, top: 10),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '26887人收藏',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999,
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: TextButton(
                            onPressed: () {},
                            style: ButtonStyle(
                                fixedSize: const MaterialStatePropertyAll(Size(60, 24)),
                                minimumSize: const MaterialStatePropertyAll(Size(60, 24)),
                                padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                                alignment: Alignment.center,
                                shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(5.r),
                                    side: BorderSide(
                                        color: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.color7979))))),
                            child: Text(
                              '看相似',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                            )),
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
        );
      },
      itemCount: 35,
      itemExtent: 140,
    );
  }
}

/// 店铺
class CollectStoreController extends GetxController {}

class CollectStoreView extends GetView<CollectStoreController> {
  const CollectStoreView({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (_, int index) {
        return Container(
          alignment: Alignment.center,
          margin: const EdgeInsets.only(top: 15),
          child: Container(
            constraints: const BoxConstraints.expand(width: 345),
            padding: const EdgeInsets.only(left: 20, right: 20, top: 10),
            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5)),
            alignment: Alignment.centerLeft,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const CircleAvatar(
                  radius: 25,
                  backgroundImage: CachedNetworkImageProvider(
                    'https://img.alicdn.com/bao/uploaded/i2/628189716/O1CN01Xdfnty2Ldz6HLvklX_!!0-item_pic.jpg',
                  ),
                ),
                Expanded(
                    child: Container(
                  padding: const EdgeInsets.only(left: 10, top: 5),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '坐标轴旗舰店',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: const EdgeInsets.only(top: 15),
                        child: Text(
                          '570人收藏',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                        ),
                      )
                    ],
                  ),
                )),
                Center(
                  child: Text(
                    '上新+10',
                    style: StylesUtils.customTextStyle(color: ColorsUtils.colorF048),
                  ),
                )
              ],
            ),
          ),
        );
      },
      itemCount: 34,
      itemExtent: 90,
    );
  }
}

/// 内容
class CollectContentController extends GetxController {}

class CollectContentView extends GetView<CollectContentController> {
  const CollectContentView({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (_, int index) {
        return Container(
          alignment: Alignment.center,
          margin: const EdgeInsets.only(top: 15),
          child: Container(
            constraints: const BoxConstraints.expand(width: 345),
            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5)),
            padding: const EdgeInsets.only(left: 10, right: 10, top: 15),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(5),
                  child: CachedNetworkImage(
                    imageUrl:
                        'https://img.alicdn.com/bao/uploaded/i1/2934168663/O1CN01vMZI1v2Drhqu5lmdB_!!0-item_pic.jpg',
                    width: 140,
                    height: 100,
                    fit: BoxFit.fill,
                    alignment: Alignment.topLeft,
                  ),
                ),
                Expanded(
                    child: Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '精彩内容为您送上',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 10, bottom: 10),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '安装方便，简单大方，适合孩子使用，客服很有耐心',
                          style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize13, color: ColorsUtils.color6666),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '2023-09-11',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize12),
                        ),
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
        );
      },
      itemCount: 34,
      itemExtent: 140,
    );
  }
}
